<template>
  <div class="Equipment">
    <div class="EquipmentImg"></div>
    <div class="Equipmentcontent">
      <div class="ssxx_info"></div>
      <div class="ssxx_top">
        <div
          :class="{
            ssxx_top_left: activeSystem != 'ntSystem',
            ssxx_top_left_active: activeSystem == 'ntSystem',
          }"
          @click="showSystem('ntSystem')"
        >
          <span>楼控系统</span>
        </div>
        <div
          :class="{
            ssxx_top_right: activeSystem != 'showFireSystem',
            ssxx_top_right_active: activeSystem == 'showFireSystem',
          }"
          @click="showSystem('showFireSystem')"
        >
          <span>消防系统</span>
        </div>
      </div>
      <div class="ssxx_middle">
        <div
          :class="{
            ssxx_middle_left: activeSystem != 'showAirSystem',
            ssxx_middle_left_active: activeSystem == 'showAirSystem',
          }"
          @click="showSystem('showAirSystem')"
        >
          <span>空调系统</span>
        </div>
        <div
          :class="{
            ssxx_middle_right: activeSystem != 'dtSystem',
            ssxx_middle_right_active: activeSystem == 'dtSystem',
          }"
          @click="showSystem('dtSystem')"
        >
          <span>电梯系统</span>
        </div>
      </div>
      <div class="ssxx_bottom">
        <div
          :class="{
            ssxx_bottom_left: activeSystem != 'bpdSystem',
            ssxx_bottom_left_active: activeSystem == 'bpdSystem',
          }"
          @click="showSystem('bpdSystem')"
        >
          <span>变配电系统</span>
        </div>
        <div
          :class="{
            ssxx_bottom_right: activeSystem != 'znhSystem',
            ssxx_bottom_right_active: activeSystem == 'znhSystem',
          }"
          @click="showSystem('znhSystem')"
        >
          <span>智能化系统</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeSystem: "dtSystem",
    };
  },

  methods: {
    showSystem(type) {
      this.activeSystem = type;
      this.$emit("changeSystem", type);
    },
  },
};
</script>

<style>
.Equipment {
  width: 100%;
  height: 30%;
}
.Equipment .EquipmentImg {
  width: 503px;
  height: 114px;
  background: url("../../../../../static/images/equipment/设备统计.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-bottom: 10px;
  margin-left: -50px;
}
.Equipmentcontent {
  width: 100%;
  height: calc(100% - 112px);
}
.ssxx_info {
  width: 409px;
  height: 372px;
  background: url("../../../../../static/images/equipment/设备信息.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  margin: 26px 264px;
  /* margin-bottom: 10px;
  margin-left: -50px; */
}
.ssxx_top {
  width: 100%;
  height: 33%;
}
.ssxx_middle {
  width: 100%;
  height: 33%;
}
.ssxx_bottom {
  width: 100%;
  height: 33%;
}
.ssxx_top_left {
  width: 102px;
  height: 93px;
  background: url("../../../../../static/images/equipment/暖通系统图标.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: -26px 270px;
  position: absolute;
}
.ssxx_top_left_active {
  width: 102px;
  height: 93px;
  background: url("../../../../../static/images/equipment/暖通系统图标-选中.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: -26px 270px;
  position: absolute;
}
.ssxx_top_left > span {
  font-size: 23px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 203px;
}
.ssxx_top_left_active > span {
  font-size: 23px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 203px;
}
.ssxx_top_right {
  width: 102px;
  height: 93px;
  background: url("../../../../../static/images/equipment/消防系统图标.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: -23px 596px;
  position: absolute;
}
.ssxx_top_right_active {
  width: 102px;
  height: 93px;
  background: url("../../../../../static/images/equipment/消防系统图标-选中.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: -23px 596px;
  position: absolute;
}
.ssxx_top_right > span {
  font-size: 23px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 203px;
}
.ssxx_top_right_active > span {
  font-size: 23px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 203px;
}
.ssxx_middle_left {
  width: 102px;
  height: 93px;
  background: url("../../../../../static/images/equipment/空调系统图标.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: -21px 172px;
  position: absolute;
}
.ssxx_middle_left_active {
  width: 102px;
  height: 93px;
  background: url("../../../../../static/images/equipment/空调系统图标-选中.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: -21px 172px;
  position: absolute;
}
.ssxx_middle_left > span {
  font-size: 23px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 203px;
}
.ssxx_middle_left_active > span {
  font-size: 23px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 203px;
}
.ssxx_middle_right {
  width: 102px;
  height: 93px;
  background: url("../../../../../static/images/equipment/电梯系统图标.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: 19px 682px;
  position: absolute;
}
.ssxx_middle_right_active {
  width: 102px;
  height: 93px;
  background: url("../../../../../static/images/equipment/电梯系统图标-选中.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: 19px 682px;
  position: absolute;
}
.ssxx_middle_right > span {
  font-size: 23px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 203px;
}
.ssxx_middle_right_active > span {
  font-size: 23px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 203px;
}
.ssxx_bottom_left {
  width: 102px;
  height: 93px;
  background: url("../../../../../static/images/equipment/变配电系统图标.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: -22px 251px;
  position: absolute;
}
.ssxx_bottom_left_active {
  width: 102px;
  height: 93px;
  background: url("../../../../../static/images/equipment/变配电系统图标-选中.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: -22px 251px;
  position: absolute;
}
.ssxx_bottom_left > span {
  font-size: 23px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 203px;
  display: inline-block;
  width: 130px;
  height: 42px;
}
.ssxx_bottom_left_active > span {
  font-size: 23px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 203px;
  display: inline-block;
  width: 130px;
  height: 42px;
}
.ssxx_bottom_right {
  width: 102px;
  height: 93px;
  background: url("../../../../../static/images/equipment/智能化系统图标.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: 0px 568px;
  position: absolute;
}
.ssxx_bottom_right_active {
  width: 102px;
  height: 93px;
  background: url("../../../../../static/images/equipment/智能化系统图标-选中.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: 0px 568px;
  position: absolute;
}
.ssxx_bottom_right > span {
  font-size: 23px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 203px;
  display: inline-block;
  width: 130px;
  height: 42px;
}
.ssxx_bottom_right_active > span {
  font-size: 23px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 203px;
  display: inline-block;
  width: 130px;
  height: 42px;
}
</style>
